<template>
  <div> <el-carousel indicator-position="outside">
      <el-carousel-item v-for="(item, index) in images" :key="index">
        <img :src="item" alt="" style="object-fit: cover; width: 100%; height: 100%;">
      </el-carousel-item>
    </el-carousel>
    <v-row dense>
      <v-col cols="4">
        <v-card color="#385F73" dark height="180px">
          <v-card-title class="text-h5">
            每日好书推荐
          </v-card-title>
          <v-card-subtitle>一本带你领略历史悠久的古老文化、感受深邃人生哲理的经典之作，不容错过！</v-card-subtitle>
          <v-card-actions>
            <v-btn text>
              来看看吧！
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
      <v-col v-for="(item, i) in items" :key="i" cols="4">
        <v-card :color="item.color" dark height="180px">
          <div class="d-flex flex-no-wrap justify-space-between">
            <div>
              <v-card-title class="text-h5" >{{ item.title }}</v-card-title>
              <v-card-subtitle>{{ item.artist }}</v-card-subtitle>
              <v-card-actions>
                <v-btn v-if="item.artist === 'Ellie Goulding'" class="ml-2 mt-3" fab icon height="40px" right width="40px">
                  <v-icon>mdi-play</v-icon>
                </v-btn>
                <v-btn v-else class="ml-2 mt-5" outlined rounded small>

                  进入
                </v-btn>
              </v-card-actions>
            </div>
            <v-avatar class="ma-3" size="125" tile>
              <v-img :src="item.src"></v-img>
            </v-avatar>
          </div>
        </v-card>
      </v-col>
    </v-row>
    <div v-for="(book, index) in books" :key="index">
      <book_info :book="book"></book_info>
    </div>
  </div>
</template>

<script>
import book_info from "../book_rec/book_info.vue";
export default {
  name: "book_sim",
  components: {
    book_info: book_info,
  },
  data() {
    return {
      images: [
        require("@/assets/example1.jpg"),
        require("@/assets/example2.jpg"),
        require("@/assets/example3.jpg"),
        require("@/assets/example4.jpg"),
      ],
      items: [
        {
          color: "#1F7087",
          src: "https://cdn.vuetifyjs.com/images/cards/foster.jpg",
          title: "精选读后感",
          artist: "进来一起看看今天的读后感精选吧！感受从不同地区的人文底蕴",
        },
        {
          color: "#952175",
          src: "https://cdn.vuetifyjs.com/images/cards/halcyon.png",
          title: "每周必读图书榜单",
          artist:
            "推荐图书榜单，从中挑选出最受欢迎的作品，是一个发现好书的好机会！",
        },
      ],
      books: [
        {
          title: "活着",
          price: "9.99元",
          image: require("@/assets/book1.jpg"),
          info: "《活着》这本书被誉为中国现代文学的经典之作，通过一位普通人的生命历程，反映了人性的伟大和悲惨。",
        },
        {
          title: "许三观卖血记",
          price: "19.99元",
          image: require("@/assets/book2.jpg"),
          info: "《许三观卖血记》则是一部关于劳动人民艰辛生活的现实主义小说，深刻描绘了中国的社会和人性。",
        },
        {
          title: "挪威的森林",
          price: "39.99元",
          image: require("@/assets/book3.jpg"),
          info: "《挪威的森林》是村上春树的代表作之一，通过讲述一个青年的成长经历，描述了现代人内心的孤独和迷茫。",
        },
        {
          title: "穆斯林的葬礼",
          price: "59.99元",
          image: require("@/assets/book4.jpg"),
          info: "《穆斯林的葬礼》则是一部具有文化背景的小说，以一个穆斯林的葬礼为线索，表现了伊斯兰文化与西方文化的冲突和融合。",
        },
        {
          title: "人性的弱点",
          price: "19.99元",
          image: require("@/assets/book5.jpg"),
          info: "《人性的弱点》则是一本著名的心理学书籍，通过讲述人性中的弱点和错误行为，帮助读者了解自我，提高个人和团队的人际关系和沟通能力。这些书籍都具有深度和广度，值得一读。",
        },
      ],
    };
  },
};
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>